<template>
  <div class="admin-container">
    <!-- 搜索框 -->
    <div class="search-container">
      <div class="top">
        <div class="top-left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="top-right">
          <!-- 重置  查询搜索 按钮 -->
          <el-button type="info" @click="restKeyWord">重置</el-button>
          <el-button type="primary" @click="queryList">查询搜索</el-button>
        </div>
      </div>
      <div class="bottom">
        <div class="text">账号/姓名 :</div>
        <el-input
          v-model="searchParams.keyword"
          placeholder="请输入账号  姓名"
        />
      </div>
    </div>
    <!-- 数据列表 ---- 添加按钮 -->
    <div class="btn-container">
      <div class="left">
        <el-icon size="18">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <!-- 添加按钮 -->
      <!-- v-if 根据 权限列表来显示  如果用户没有这个权限  将不显示添加按钮 -->
      <el-button type="primary" @click="addFn">添加</el-button>
    </div>
    <!-- 表格 -->
    <div class="table-container">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="username" label="账号" />
        <el-table-column prop="nickName" label="姓名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="createTime" label="添加时间">
          <template #default="scope">
            {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column prop="loginTime" label="最后登陆">
          <template #default="{ row }">
            {{
              row.loginTime
                ? dayjs(row.loginTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @click="SwitchStatus(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              size="small"
              @click="allotRoleFn(row.id)"
              >分配角色</el-button
            >
            <el-button link type="primary" size="small" @click="editFn(row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 组件 -->
    <div class="pagination-box">
      <el-pagination
        v-model:current-page="paginationParams.currentPage"
        v-model:page-size="paginationParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationParams.total"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 编辑窗口 -->
    <AdminEdit
      :dialogFormVisible="dialogFormVisible"
      :id="editId"
      @cancel="doCancelFn"
      @confirm="doConfirmFn"
    />
    <!-- 分配角色 窗口 -->
    <AllotRole
      :roleDialogVisible="roleDialogVisible"
      :id="editId"
      @cancel="roleCancelFn"
      @confirm="roleConfirmFn"
    />
  </div>
</template>

<script setup lang="ts">
import * as http from "@/request/http";
import { ref, reactive } from "vue";
import { ElMessage, dayjs } from "element-plus";
import { Search, Tickets } from "@element-plus/icons-vue";
import AdminEdit from "./adminEdit.vue";
import AllotRole from "./allotRole.vue";
import useTable from "@/hooks/components/useTable";
import { useUserStore } from "@/store/userStore";

const userStore = useUserStore();

// 查询参数对象   keyword关键字
const searchParams = reactive({
  keyword: "",
});

// 调用useTable函数  实现table数据渲染 以及 分页器功能
const {
  tableData,
  paginationParams,
  handleCurrentChange,
  handleSizeChange,
  queryList,
} = useTable(http.admin.adminList, searchParams);

// 点击 重置(清空) 搜索框
const restKeyWord = () => {
  searchParams.keyword = ""; // 重置(清空)搜索框内容
};

// 修改用户状态
const SwitchStatus = (row: IUserModel) => {
  console.log(row.id, row.status);
  http.admin
    .updateStatus(row.id, row.status)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("更新成功");
      } else {
        ElMessage.error("更新失败");
        // 更新失败的话  需要将 状态 复原
        row.status = row.status == 1 ? 0 : 1;
      }
    })
    .catch((err) => {
      console.log("err : ", err);
      // 更新失败的话  需要将 状态 复原
      row.status = row.status == 1 ? 0 : 1;
    });
};

// 控制 (新增  编辑)窗口的打开/关闭  默认关闭
const dialogFormVisible = ref(false);

// 当前用户id
const editId = ref(0);

// 点击添加
const addFn = () => {
  editId.value = 0; // 点击 新增时 当前用户id为0
  dialogFormVisible.value = true; // 打开 新增窗口
};
// 点击编辑
const editFn = (id: number) => {
  editId.value = id; // 点击 编辑时 修改当前用户id为传进来的参数id(当前编辑的用户id)
  dialogFormVisible.value = true; // 打开 编辑窗口
};

// 监听 子组件的 自定义事件 cancel  的回调函数
const doCancelFn = () => {
  dialogFormVisible.value = false; // 关闭窗口
};

// 监听 子组件的 自定义事件 confirm  的回调函数
const doConfirmFn = () => {
  dialogFormVisible.value = false; // 关闭窗口
  queryList(); // 重新查询  更新数据
};

// 分配角色 相关数据

// 控制 AllotRole子组件的 打开/关闭
const roleDialogVisible = ref(false);

// 点击 分配角色
const allotRoleFn = (id: number) => {
  editId.value = id;
  roleDialogVisible.value = true; // 打开 分配角色窗口
};

// 监听 AllotRole子组件 的 自定义事件cancel  执行回调
const roleCancelFn = () => {
  editId.value = 0;
  roleDialogVisible.value = false; // 关闭窗口
};

// 监听 AllotRole子组件 的 自定义事件confirm  执行回调
const roleConfirmFn = () => {
  editId.value = 0;
  roleDialogVisible.value = false; // 关闭窗口
};
</script>

<!-- 样式 -->
<style scoped lang="less">
.admin-container {
  background-color: #fff;

  // 搜索框
  .search-container {
    padding: 20px;
    box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;

    .top {
      display: flex;
      justify-content: space-between;

      .top-left {
        display: flex;
        align-items: center;

        span {
          margin-left: 15px;
        }
      }
    }

    .bottom {
      margin-left: 50px;
      margin-right: 800px;
      display: flex;
      align-items: center;

      .text {
        width: 100px;
      }
    }
  }

  // 添加按钮
  .btn-container {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    margin: 20px 0;
    box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;

    .left {
      display: flex;
      align-items: center;

      span {
        margin-left: 10px;
      }
    }
  }

  // 分页器
  .pagination-box {
    display: flex;
    flex-direction: row-reverse;
    margin: 20px 0;
  }
}
</style>
